<!DOCTYPE html><html><head><title>Ext.layout.container.Border | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.layout.container.Border',
        docClass: 'Ext.layout.container.Border',
        docReq: 'Ext.layout.container.Border',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'Border.html#Ext-layout.container.Border';
    clsInfo = {"methods":["getLayoutItems","getPlaceholder","getRenderTarget","getTarget"],"cfgs":["bindToOwnerCtComponent","bindToOwnerCtContainer","itemCls"],"properties":[],"events":[],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Border.html#Ext-layout.container.Border" target="_blank">Ext.layout.container.Border</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.layout.Layout.html" rel="Ext.layout.Layout" class="cls docClass">Ext.layout.Layout</a><div class="subclass"><a href="Ext.layout.container.AbstractContainer.html" rel="Ext.layout.container.AbstractContainer" class="cls docClass">Ext.layout.container.AbstractContainer</a><div class="subclass"><a href="Ext.layout.container.Container.html" rel="Ext.layout.container.Container" class="cls docClass">Ext.layout.container.Container</a><div class="subclass"><strong>Ext.layout.container.Border</strong></div></div></div></div></pre><p>This is a multi-pane, application-oriented UI layout style that supports multiple
nested panels, automatic bars between regions and built-in
<a href="Ext.panel.Panel.html#collapsible" rel="Ext.panel.Panel#collapsible" class="docClass">expanding and collapsing</a> of regions.</p>


<p>This class is intended to be extended or created via the <code>layout:'border'</code>
<a href="Ext.container.Container.html#layout" rel="Ext.container.Container#layout" class="docClass">Ext.container.Container.layout</a> config, and should generally not need to be created directly
via the new keyword.</p>


<p><img class="screenshot" src="../Ext.layout.container.Border.png" alt="Ext.layout.container.Border container layout" /></p>

<p>Example usage:</p>


<pre class="prettyprint"><code>     Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 400,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            margins: '0 5 5 5'
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
        }],
        renderTo: Ext.getBody()
    });
</code></pre>


<p><b><u>Notes</u></b>:</p>


<div class="mdetail-params"><ul>
<li>Any Container using the Border layout <b>must</b> have a child item with <code>region:'center'</code>.
The child item in the center region will always be resized to fill the remaining space not used by
the other regions in the layout.</li>
<li>Any child items with a region of <code>west</code> or <code>east</code> may be configured with either
an initial <code>width</code>, or a <a href="Ext.layout.container.Box.html#flex" rel="Ext.layout.container.Box#flex" class="docClass">Ext.layout.container.Box.flex</a> value, or an initial percentage width <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
<li>Any child items with a region of <code>north</code> or <code>south</code> may be configured with either
an initial <code>height</code>, or a <a href="Ext.layout.container.Box.html#flex" rel="Ext.layout.container.Box#flex" class="docClass">Ext.layout.container.Box.flex</a> value, or an initial percentage height <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
<li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>.To add/remove
Components within a BorderLayout, have them wrapped by an additional Container which is directly
managed by the BorderLayout.  If the region is to be collapsible, the Container used directly
by the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.panel.Panel)
is added to the west region:
<pre class="prettyprint"><code>wrc = <a href="Ext.html#getCmp" rel="Ext#getCmp" class="docClass">Ext.getCmp</a>('west-region-container');
wrc.<a href="Ext.container.Container.html#removeAll" rel="Ext.container.Container#removeAll" class="docClass">removeAll</a>();
wrc.<a href="Ext.container.Container.html#add" rel="Ext.container.Container#add" class="docClass">add</a>({
    title: 'Added Panel',
    html: 'Some content'
});
</code></pre>
</li>
<li><b>There is no BorderLayout.Region class in ExtJS 4.0+</b></li>
</ul></div>

<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">CSS Class configs</h4><div id="config-itemCls" class="member f inherited"><a href="Ext.layout.container.Border.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Border.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to the container or any of its children using standard CSS rules. See
<a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>


<p></p></p>
</div></div></div><h4 class="cfgGroup">Other Configs</h4><div id="config-bindToOwnerCtComponent" class="member f inherited"><a href="Ext.layout.container.Border.html#config-bindToOwnerCtComponent" rel="config-bindToOwnerCtComponent" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtComponent" class="viewSource">view source</a></div><a name="bindToOwnerCtComponent"></a><a name="config-bindToOwnerCtComponent"></a><a href="Ext.layout.container.Border.html#" rel="config-bindToOwnerCtComponent" class="cls expand">bindToOwnerCtComponent</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
</div><div class="long"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
</div></div></div><div id="config-bindToOwnerCtContainer" class="member inherited"><a href="Ext.layout.container.Border.html#config-bindToOwnerCtContainer" rel="config-bindToOwnerCtContainer" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtContainer" class="viewSource">view source</a></div><a name="bindToOwnerCtContainer"></a><a name="config-bindToOwnerCtContainer"></a><a href="Ext.layout.container.Border.html#" rel="config-bindToOwnerCtContainer" class="cls expand">bindToOwnerCtContainer</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
</div><div class="long"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
</div></div></div><div id="config-itemCls" class="member inherited"><a href="Ext.layout.container.Border.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Border.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to the container or any of its children using standard CSS rules. See
<a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>


<p></p></p>
</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-getLayoutItems" class="member f inherited"><a href="Ext.layout.container.Border.html#method-getLayoutItems" rel="method-getLayoutItems" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getLayoutItems" class="viewSource">view source</a></div><a name="getLayoutItems"></a><a name="method-getLayoutItems"></a><a href="Ext.layout.container.Border.html#" rel="method-getLayoutItems" class="cls expand">getLayoutItems</a> : Array</div><div class="description"><div class="short">Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
...</div><div class="long"><p>Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
base class), or the layout phase (onLayout).</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>of child components</p>
</li></ul></div></div></div><div id="method-getPlaceholder" class="member ni"><a href="Ext.layout.container.Border.html#method-getPlaceholder" rel="method-getPlaceholder" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Border.html" class="definedIn docClass">Ext.layout.container.Border</a><br/><a href="../source/Border.html#Ext-layout.container.Border-method-getPlaceholder" class="viewSource">view source</a></div><a name="getPlaceholder"></a><a name="method-getPlaceholder"></a><a href="Ext.layout.container.Border.html#" rel="method-getPlaceholder" class="cls expand">getPlaceholder</a>(
<span class="pre">Panel panel</span>)
 : Component</div><div class="description"><div class="short">Return the placeholder Component to which the passed child Panel of the layout will collapse.
By default, this will b...</div><div class="long"><p>Return the <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a> Component to which the passed child Panel of the layout will collapse.
By default, this will be a <a href="Ext.panel.Header.html" rel="Ext.panel.Header" class="docClass">Header</a> component (Docked to the appropriate border). See <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a>.
config to customize this.</p>


<p><b>Note that this will be a fully instantiated Component, but will only be <i>rendered</i> when the Panel is first collapsed.</b></p>

<h3 class="pa">Parameters</h3><ul><li><span class="pre">panel</span> : Panel<div class="sub-desc"><p>The child Panel of the layout for which to return the <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a>.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Component</span>&nbsp; &nbsp;<p>The Panel's <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a> unless the <a href="Ext.panel.Panel.html#collapseMode" rel="Ext.panel.Panel#collapseMode" class="docClass">collapseMode</a> is
<code>'header'</code>, in which case <i>undefined</i> is returned.</p>
</li></ul></div></div></div><div id="method-getRenderTarget" class="member inherited"><a href="Ext.layout.container.Border.html#method-getRenderTarget" rel="method-getRenderTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getRenderTarget" class="viewSource">view source</a></div><a name="getRenderTarget"></a><a name="method-getRenderTarget"></a><a href="Ext.layout.container.Border.html#" rel="method-getRenderTarget" class="cls expand">getRenderTarget</a> : Ext.core.Element</div><div class="description"><div class="short">Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.tar...</div><div class="long"><p>Returns the element into which rendering must take place. Defaults to the owner Container's <a href="Ext.AbstractComponent.html#targetEl" rel="Ext.AbstractComponent#targetEl" class="docClass">Ext.AbstractComponent.targetEl</a>.</p>


<p>May be overridden in layout managers which implement an inner element.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-getTarget" class="member inherited"><a href="Ext.layout.container.Border.html#method-getTarget" rel="method-getTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getTarget" class="viewSource">view source</a></div><a name="getTarget"></a><a name="method-getTarget"></a><a href="Ext.layout.container.Border.html#" rel="method-getTarget" class="cls expand">getTarget</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the owner component's resize element.</p>
</div><div class="long"><p>Returns the owner component's resize element.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>